<head>
    <script src="../build/index.js"></script>
</head>

<body>
    <canvas id="app" width="800" height="400"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'));
        $app.start();

        var G = Easycanvas.ImgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png');

        var Sprite1 = $app.add({
            content: {
                img: G,
            },
            style: {
                rotate: 0,
                locate: 'lt',
            },
            events: {
                click: function (e) {
                    Sprite1.style.rotate = Math.random() * 360;
                    this.style.opacity = Math.random() + 0.5;
                    $app.paintList[0].style.left = Math.random() * 50;
                    return true;
                },
            },
        });

        setTimeout(function () {
            $app.remove(Sprite1);
            console.log($app.paintList);
            setTimeout(function () {
                console.log($app.paintList);
            }, 50);
        }, 2000);
    </script>
</body>

